<template>
  <div class="box">
    <div class="venuesHeader">
      <!-- 场馆头部 -->
      <el-input v-model="search" placeholder="搜索关键词" style="width: 15%;margin-right: 20px;margin-top: 10px;margin-left: 10px;" />
      <el-button type="primary">查询</el-button>
      <el-button  @click="addVenues">添加场馆</el-button>
    </div>
    <div class="venuesTable">
      <!-- 场馆表格 -->
      <el-table :data="TableData" style="width: 100%" border>
        <el-table-column label="场馆名称" prop="name" width="180"/>
        <el-table-column label="电话" prop="tel" width="170" />
        <el-table-column label="地址" prop="address"  width="280"/>
        <el-table-column label="邮箱" prop="email" width="200" />
        <el-table-column label="状态" prop="state"  width="80"/>
        <el-table-column   label="操作">
          <template #default="scope">
            <el-button size="small"  type="text"  @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
            <el-button size="small" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
    <el-pagination
      class="paging"
      background
      layout="prev, pager, next"
      :total="50"
    />
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  name: "VenuesPage",
  setup() {
    const router = useRouter()
    const store = useStore()
    interface venuesUser {
      name: string
      address: string
      email:string
      tel:number
      state:string

    }
    const search = ref('')
    const handleEdit = (index: number, row: venuesUser) => {
      console.log(index, row)
    }
    const handleDelete = (index: number, row: venuesUser) => {
      console.log(index, row)
    }
    const addVenues = () => {
      router.push({ name: "addVenues" })
    }
    const TableData = store.state.venuesState.tableData
      
    
    return {
      TableData,
      handleEdit,
      handleDelete,
      search,
      addVenues
    }
  }
})

</script>

<style scoped>
.box{
  height: 100%;
  margin:50px;
  background-color: white;
}
.venuesHeader{
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>